<template>
  <div id="service-vpn">
    <div class="form-wrap mb20">
      <div v-for="(item, idx) in fields" :key='idx'>
        <!-- <div class="field">{{item.label}}：</div>
        <div class="value" v-if="item.type=='input'">
          <input class="input-none bottom-line">
          <span class="add" v-if="item.operate">{{item.operate}}</span>
        </div> -->
        <os-input :item="item" v-if="item.type=='input'"></os-input>
        <os-select :item='item' v-if="item.type=='select'"></os-select>
      </div>
      <div class="value alone-right">
        <div class="btn btn-blue">{{$t('btn.save')}}</div>
        <div class="btn btn-blue">{{$t('btn.disconnect')}}</div>
        <div class="btn btn-blue">{{$t('btn.reconnect')}}</div>
      </div>
    </div>
    <os-table :info="info" :mb="false"></os-table>
    <div class="log-wrap mb20">
      <div class="log-title">{{log}}：</div>
      <div class="log-content"></div>
    </div>
    
  </div>
</template>

<script>

  export default {
    computed: {
      fields(){
        return this.$t('service.vpn.fields')
      },
      info(){
        return this.$t('service.vpn.info')
      },
      log(){
        return this.$t('service.vpn.log')
      }
    },
    created(){
      this.$bus.emit('changeTab', 2)
    }
  }
</script>

<style lang="scss" scoped>
  .log-content{
    background: #fffacd;
    min-height: 100px;
    border: 1px solid #ccc;
    line-height: 2;
    text-align: left;
    padding-left: 10px;
  }
</style>
